<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>购物车</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/plugin/iconfont.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/page/usercenter.css">
    <link rel="stylesheet" href="../../static/css/page/orderConfirm.css">
    <link rel="stylesheet" href="../../static/css/page/store.css">
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header class="hidden-xs">
        <nav class="mainnav">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                        <ul class="nav nav-pills topnav" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="#">活动报名</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">楚才书店</a>
                            </li>
                            <li class="logo-item">
                                <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">个人中心</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">安全退出</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 内容信息 -->
    <div class="container main-body">
        <!-- 内容信息 -->
        <div class="main-content main-content--inner">
            <h1 class="main-title main-title--inner"><span>购物车</span></h1>
            <table class="table table-header">
                <colgroup>
                    <col style="width:40%">
                    <col style="width:15%">
                    <col style="width:15%">
                    <col style="width:15%">
                    <col style="width:15%">
                </colgroup>
                <tbody>
                    <tr>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>实付款</th>
                        <th>操作</th>
                    </tr>
                </tbody>
            </table>
            <table class="table table-body table-body--cart">
                <colgroup>
                    <col style="width:5%">
                    <col style="width:35%">
                    <col style="width:15%">
                    <col style="width:15%">
                    <col style="width:15%">
                    <col style="width:15%">
                </colgroup>
                <tbody class="table-body__header">
                    <tr>
                        <td class="text-center">
                            <input type="checkbox">
                        </td>
                        <td class="business-title">
                            <i class="iconfont">&#xe605;</i>
                            楚才作文
                        </td>
                    </tr>
                </tbody>
                <tbody class="table-body__cont text-center">
                    <tr>
                        <td class="text-center">
                            <input type="checkbox">
                        </td>
                        <td>
                            <div class="media">
                                <a class="media-left" href="#">
                                    <img src="../../static/images/activity.png" alt="activity">
                                </a>
                                <div class="media-body media-body--cart">
                                    <h4 class="media-heading">
                                        <a href="#">楚才文萃小学卷</a>
                                    </h4>
                                </div>
                            </div>
                        </td>
                        <td>
                            <p>¥20</p>
                        </td>
                        <td>
                            <span class="numberbox numberbox--amount js-numberbox">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="1">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                            </span>
                        </td>
                        <td>
                            <p>¥60</p>
                        </td>
                        <td class="user-option">
                            <p>
                                <a class="user-link" href="#">删除</a>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <input type="checkbox">
                        </td>
                        <td>
                            <div class="media">
                                <a class="media-left" href="#">
                                    <img src="../../static/images/activity.png" alt="activity">
                                </a>
                                <div class="media-body media-body--cart">
                                    <h4 class="media-heading">
                                        <a href="#">楚才文萃小学卷</a>
                                    </h4>
                                </div>
                            </div>
                        </td>
                        <td>
                            <p>¥20</p>
                        </td>
                        <td>
                            <span class="numberbox numberbox--amount js-numberbox">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="1">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                            </span>
                        </td>
                        <td>
                            <p>¥60</p>
                        </td>
                        <td class="user-option">
                            <p>
                                <a class="user-link" href="#">删除</a>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <!--<input type="checkbox">-->
                            <span class="invalid">失效</span>
                        </td>
                        <td>
                            <div class="media">
                                <a class="media-left" href="#">
                                    <img src="../../static/images/activity.png" alt="activity">
                                </a>
                                <div class="media-body media-body--cart">
                                    <h4 class="media-heading">
                                        <a href="#">楚才文萃小学卷</a>
                                    </h4>
                                </div>
                            </div>
                        </td>
                        <td>
                            <p>¥20</p>
                        </td>
                        <td>
                            <span class="numberbox numberbox--amount js-numberbox">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="1">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                            </span>
                        </td>
                        <td>
                            <p>¥60</p>
                        </td>
                        <td class="user-option">
                            <p>
                                <a class="user-link" href="#">删除</a>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="settlement-navbar">
                <table class="table table-header">
                    <colgroup>
                        <col style="width:5%">
                        <col style="width:35%">
                        <col style="width:12%">
                        <col style="width:17%">
                        <col style="width:18%">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td class="text-center">
                            <input id="checkAll" type="checkbox">
                        </td>
                        <td>
                            <label for="checkAll">全选</label><a class="settlement-navbar__remove" href="javascript:;">删除</a>
                        </td>
                        <td class="text-left">
                            共 <em class="settlement-navbar__amount">3</em> 件商品
                        </td>
                        <td>
                            合计：<em class="settlement-navbar__total">¥<span>180</span></em>
                        </td>
                        <td class="text-center">
                            <a class="settlement-navbar__btn" href="#">去结算</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
            </div>
        </div>
    </div>
</footer>

<script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
<script src="../../static/js/lib/bootstrap.min.js"></script>
<script>
    $(function(){
        addPaddingbottom();
    });

    //当网页正文高度小于可视窗口高度时，为正文区域添加下内边距撑满整屏
    function addPaddingbottom(){
        var $mainContent = $(".main-content");
        var headerH = $("header").height();
        var bodyH = $(".main-body").height();
        var footerH = $("footer").height();
        var dh = headerH + bodyH;
        var wh = $(window).height();
        var paddingBottom = wh - dh + footerH + 30;

        //console.log(paddingBottom);
        //console.log("页面高"+dh);
        //console.log("浏览器高"+wh);

        if(dh < wh){
            $mainContent.css("padding-bottom", paddingBottom+"px");
        }
        else{
            $mainContent.css("padding-bottom", "100px");
        }
    }
</script>
</body>
</html>